<template>
	<view class="hb-comment" style="min-height: 400rpx;">
		<view class="comment-num">
			<view class="content">
				<view class="input" @click="commentInput">
					<view class="pinglunInput" :style="showClose?'width:660rpx':''">
						<u-icon name="chat" size="20" color="#9393AD"></u-icon>
						<view class="xiepinglun"> 写评论... </view>
					</view>
				</view>
					<view class="icon" v-if="!showClose">
					<view class="fabulous" @click="memberLike">
						<u-icon size="32" :name="postDetail.usrThumbsStatus==0?'thumb-up':'thumb-up-fill'"
							:color="postDetail.usrThumbsStatus==0?'#808080':'red'" ></u-icon>
							<u-badge :bgColor="postDetail.usrThumbsStatus==0?'#808080':'red'" class="text-add" :borderColor="postDetail.usrThumbsStatus==0?'#808080':'red'" size="mini" :value="postDetail.loveQty || 0" type="error" shape="circle"></u-badge>
					</view>
					<view class="fabulous" @click="collectionPost">
						<u-icon size="32"  :name="postDetail.countStatus==0?'star':'star-fill'"
							:color="postDetail.countStatus==0?'#808080':'#fdbb1b'" >
						</u-icon>
						<u-badge :bgColor="postDetail.countStatus==0?'#808080':'#fdbb1b'" class="text-add" :borderColor="postDetail.countStatus==0?'#808080':'#fdbb1b'" size="mini" :value="postDetail.saveQty || 0" type="error" shape="circle"></u-badge>
					</view>
				</view>
			</view>
		</view>
		<!-- 阅读数下边那条线-end -->
		<!-- 评论主体-start -->
		<view class="comment-list" v-if="commentData.comment && commentData.comment.length">
			<!-- 评论列表-start -->
			<view style="padding-bottom: 10rpx;box-sizing: border-box;">
				<view class="comment-box" :id="'id'+String(item.id)" v-for="(item, index) in commentData.comment"
					:key="index">
					<view class="comment-box-item">
						<view @click="routeUser(item)">
							<image :src="item.headImg?(ip+item.headImgCode+'/'+item.headImg): emptyAvatar"
								mode="aspectFill" class="avatar"></image>
						</view>
						<view class="comment-main">
							<!-- 父评论体-start -->
							<view class="comment-main-top">
								<view class="nick-name-box">
									<view class="nick-name" @click="reply(item,item.usrName,item.id)">
										{{item.usrName || '游客'}}
									</view>
								</view>
							</view>
							<view class="comment-main-content" @click="reply(item,item.usrName,item.id)">
								{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}
								<text v-if="item.content.length > 60">
									{{item.hasShowMore ? item.content.slice(59) : '...'}}
									<text class="foot-btn" @click.stop="showMore(item.id)">
										{{item.hasShowMore ? '收起' : '展开'}}
									</text>
								</text>
							</view>
							<view class="comment-main-foot">
								<view class="foot-time">{{item.createTime}}</view>
								<view class="foot-btn" @click="reply(item,item.usrName,item.id)">回复</view>
								<view class="foot-btn" v-if="item.userNo == userInfo.craftsmanId"
									@click="confirmDelete(item,index)">删除</view>
								<view class="shijian">
									<!-- {{timeDifference(item.reDate)}} -->
								</view>
							</view>
							<!-- 父评论体-end -->
							<!-- 子评论列表-start -->
							<view class="comment-sub-box">
								<view class="comment-sub-item" v-show="!item.showAll?index2<2:index2>=0"
									v-for="(each,index2) in item.assoCommentList" :key="index2">
									<view @click="routeUser(each)">
										<image :src="each.headImg?(ip+each.headImgCode+'/'+each.headImg): emptyAvatar"
											mode="aspectFill" class="avatar">
										</image>
									</view>
									<view class="comment-main">
										<view class="sub-comment-main-top">
											<view class="nick-name" @click="reply(item,each.usrName,item.id)">
												{{each.usrName}}
											</view>
										</view>
										<view class="comment-main-content" @click="reply(item,each.usrName,item.id)">
											{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
											<view v-if="each.content.length > 60">
												{{each.hasShowMore ? each.content.slice(59) : '...'}}
												<text class="foot-btn" @click.stop="showMore(each.id)">
													{{each.hasShowMore ? '收起' : '展开'}}
												</text>
											</view>
										</view>
										<view class="comment-main-foot">
											<view class="foot-time">{{each.createTime}}</view>
											<view class="foot-btn" @click="reply(item,each.usrName,item.id)"> 回复</view>
											<view class="foot-btn" v-if="each.userNo == userInfo.craftsmanId"
												@click="confirmDelete(each,index,index2)">删除 </view>
										</view>
									</view>
								</view>
								<text @click="setAll(item,index)"
									v-show="item.assoCommentList && item.assoCommentList.length>2"
									style="font-size: 24rpx;display: block;text-align: center;">
									{{item.showAll?'—— 点击收起 ——':' —— 查看更多 ——'}}</text>
							</view>
							<!-- 子评论列表-end -->
						</view>
					</view>
				</view>
				<u-loadmore v-if="commentData.status != 'more'" :status="commentData.status" :loading-text="loadingText"
					:nomore-text="nomoreText" />
			</view>
			<!-- 评论列表-end -->
		</view>
		<!-- 评论主体-end -->
		<!-- 无评论-start -->
		<view class="comment-none" v-else> 暂无评论，<text @click="commentInput" style="color: #007AFF;">抢沙发</text>
		</view>
		<!-- 无评论-end -->
		<!-- 新增评论-start -->
		<view class="comment-submit-box" v-if="submit" @click="closeInput">
			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
				<view class="comment-submit">
					<view class="btn-click cancel" style="background-color: #FFFFFF;" @click="closeInput">取消</view>
					<view>
						<view class="replayTag" v-show="showTag">
							<view>回复 {{pUser}} 的评论</view>
							<view @click="tagClose" class="replyTagClose">×</view>
						</view>
					</view>
					<view>
						<view class="btn-click" @click="add">发布</view>
					</view>
				</view>
				<textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder"
					:adjust-position="false" :show-confirm-bar="false" @blur="blur" @focus="focusOn" :focus="focus"
					maxlength="800"></textarea>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		timeDifference
	} from "@/utils/formaterTime.js"
	import {
		getToken
	} from '@/utils/token.js'
	export default {
		name: 'hb-comment',
		props: {
			cmData: {
				type: Object,
				default: () => {
					return null;
				}
			},
			postDetail: {
				type: Object,
				default: () => {
					return null;
				}
			},
			currId: {
				type: Number,
				default: 0
			},
			showClose: {
				type: Boolean,
				default: true
			},
			deleteTip: {
				type: String,
				default: () => {
					return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';
				}
			},
			hbHeigth: {
				type: Number,
				default: 0
			},
			replayId: {
				type: String || Number,
				default: null
			}
		},
		watch: {
			cmData: {
				handler: function(newVal, oldVal) {
					// //console.log('改变了',newVal)
					this.init(newVal);
				},
				immediate: true
			},
			currId: function() {
				this.scollTo = 'id' + String(this.currId)
				//console.log(this.scollTo, 'scloo')
			}
		},
		data() {
			return {
				"emptyAvatar": "",
				"commentData": null,
				"placeholder": "请输入评论",
				"commentReq": {
					"pId": null, // 评论父id
					"content": null, // 评论内容
					"fromName": "", //上级用户名称
					"fromUid": "", //上级用户编号
				},
				"pUser": null, // 标签-回复人
				"showTag": false, // 标签展示与否
				"focus": false, // 输入框自动聚焦
				"submit": false, // 弹出评论
				"KeyboardHeight": 0, // 键盘高度
				ip: 'https://www.ydylmold.cn/file/getPlayResource/',
				scollTo: '',
				loadingText: '加载中',
				nomoreText: '实在没有了',
				userInfo: '',
				showSub: false
			};
		},
		created: function() {
			this.scollTo = 'id' + String(this.currId)
			this.userInfo = getToken('userInfo')
			if (this.replayId) {
				this.nomoreText = '当前需要回复评论'
			}
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height;
			})
		},
		methods: {
			timeDifference,
			palyVideo(id) {
				this.$refs[id].pal
			},
			routeUser(item) {
				// let userinfo = getToken('userInfo')
				// if (!userinfo || userinfo == null || userinfo === "") {
				// 	// this.$store.state.commonMethods.theLoginStatus = true
				// 	return false
				// }
				// this.$store.state.commonMethods.userNo = item.userNo
				// this.$u.route({
				// 	url: `pages/my/other?useNo=${item.userNo}`
				// })
			},
			memberLike() {
				this.$emit('memberLike')
			},
			collectionPost() {
				this.$emit('collectionPost')
			},
			setAll(item, index) {
				item.showAll = !item.showAll
				this.$set(this.commentData.comment, index, item)
			},
			// 初始化评论
			init(cmData) {
				for (var i in cmData.comment) {
					cmData.comment[i].hasShowMore = false;
					cmData.comment[i].showAll = false;
					for (var j in cmData.comment[i].assoCommentList) {
						cmData.comment[i].assoCommentList[j].showAll = false;
					}
				}
				this.commentData = cmData;
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 回复评论
			reply(pUser, reUser, pId) {
				//console.log(pUser)
				this.pUser = pUser.usrName;
				this.commentReq.pId = pId;
				this.commentReq.fromName = reUser
				this.commentReq.fromUid = pUser.userNo
				if (reUser) {
					this.commentReq.content = '@' + reUser + ' ';
				} else {
					this.commentReq.content = '';
				}
				this.showTag = true;
				this.commentInput();
			},
			// 删除评论前确认
			confirmDelete(commentId, index1, index2) {
				//console.log(commentId, index1, index2)
				var that = this;
				uni.showModal({
					title: '警告',
					content: that.deleteTip,
					confirmText: '确认删除',
					success: res => {
						if (res.confirm) {
							that.$emit('del', {
								id: commentId.id,
								index: index1,
								index2: (index2 == 0 || index2) ? index2 : ''
							});
						}
					}
				});
			},
			// 新增评论
			add() {
				if (!this.commentReq.content) {
					uni.showToast({
						title: '请填写评论内容',
						duration: 1000,
						icon: 'none'
					});
					return
				}
				this.$emit('add', this.commentReq);
				this.closeInput()
			},
			// 点赞评论
			like(commentId) {
				this.$emit('like', commentId);
			},
			// 新增完成
			addComplete() {
				this.commentReq.content = null;
				this.tagClose();
				this.closeInput();
			},
			// 点赞完成-本地修改点赞结果
			likeComplete(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData
							.comment[i].likeNum++;
						this.commentData.comment[i].hasLike = !this.commentData.comment[i].hasLike;
						return
					}
					for (var j in this.commentData.comment[i].assoCommentList) {
						if (this.commentData.comment[i].assoCommentList[j].id == commentId) {
							this.commentData.comment[i].assoCommentList[j].hasLike ? this.commentData.comment[i]
								.assoCommentList[j].likeNum-- : this.commentData.comment[i].assoCommentList[j].likeNum++;
							this.commentData.comment[i].assoCommentList[j].hasLike = !this.commentData.comment[i]
								.assoCommentList[j].hasLike;
							return
						}
					}
				}
			},
			// 删除完成-本地删除评论
			deleteComplete(commentId) {
				for (var i in this.commentData.comment) {
					for (var j in this.commentData.comment[i].assoCommentList) {
						if (this.commentData.comment[i].assoCommentList[j].id == commentId) {
							this.commentData.comment[i].assoCommentList.splice(Number(j), 1);
							return
						}
					}
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment.splice(Number(i), 1);
						return
					}
				}
			},
			// 展开评论
			showMore(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
						this.$forceUpdate();
						return
					}
					for (var j in this.commentData.comment[i].assoCommentList) {
						if (this.commentData.comment[i].assoCommentList[j].id == commentId) {
							this.commentData.comment[i].assoCommentList[j].hasShowMore = !this.commentData.comment[i]
								.assoCommentList[j].hasShowMore;
							this.$forceUpdate();
							return
						}
					}
				}
			},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 标签关闭
			tagClose() {
				this.showTag = false;
				this.pUser = null;
				this.commentReq.pId = null;
				this.commentReq.content = '';
			},
			// 输入评论
			commentInput() {
				if (getToken('isLogin') == false) {
					this.$store.dispatch('showAuthModal', 'accountLogin');
				}
				// TODO 调起键盘方法
				this.submit = true;
				// this.commentReq.content = ''
				setTimeout(() => {
					this.focus = true;
				}, 50)
			},
			// 关闭输入评论
			closeInput() {
				this.focus = false;
				this.submit = false;
				this.commentReq.content = ''
			}
		}
	};
</script>
<style lang="scss" scoped>
	cover-view {
		white-space: normal;
	}

	.hb-comment {
		padding: 10rpx;
		box-sizing: border-box;
	}

	.top-read {
		font-size: 28rpx;
		padding-left: 10rpx;
		color: #999999;
	}

	.seg_line_box {
		display: flex;
		height: 5rpx;
		justify-content: space-between;
		margin: 5rpx 0;
	}

	.seg_line {
		width: 45%;
		border-bottom: 1rpx solid #e1e1e1;
	}

	.seg_dot {
		width: 8%;
		border-bottom: 5rpx dotted #dbdbdb;
	}

	.comment-num {
		display: flex;
		justify-content: space-between;
		background-color: #FFFDEF;
		width: 100%;
		align-items: flex-end;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;

		.content {
			height: 100%;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.input {

				// width: 660rpx;
				.pinglunInput {
					width: 370rpx;
					height: 74rpx;
					border-radius: 50rpx;
					background-color: #E6E6E6;
					display: flex;
					align-items: center;

					.tubiao {
						margin: 0 20rpx;
					}

					.xiepinglun {
						color: #9393AD;
						font-size: 26rpx;
					}
				}
			}

			.icon {
				flex: 1;
				display: flex;
				justify-content: space-between;
			}
		}

		.icon {
			.fabulous {
				width: 120rpx;
				display: flex;
				flex-direction: flex;
				align-items: center;
				// position: relative;
				margin-left: 28rpx;

				.text-add {
					font-size: 24rpx;
					margin-bottom: 30rpx;
					// position: absolute;
					// right: -10rpx;
					// top: -28rpx;
					// height: 36rpx!important;
				}
			}
		}
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
		flex: 1;
		box-sizing: border-box;
	}

	.comment-main-top {
		// width: 600rpx;
		flex: 1;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.sub-comment-main-top {
		// width: 510rpx;
		flex: 1;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.nick-name-box {
		display: flex;
		align-items: center;
	}

	.comLogo {
		margin-right: 18rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: #d218b1;
	}

	.com2 {
		background-color: #f19c0b;
	}

	.com3 {
		background-color: #c8da85;
	}

	.com4 {
		background-color: #bfd0da;
	}

	.nick-name {
		color: #2d8cf0;
	}

	.isLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2d8cf0;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #999999;
	}

	.comment-main-content {
		padding: 10rpx 10rpx 10rpx 0;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;

		.shijian {
			margin-left: 10rpx;
		}
	}

	.replayTag {
		color: #909399;
		margin-bottom: 5px;
		border: 1px solid #c8c9cc;
		background-color: #f4f4f5;
		border-radius: 3px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16rpx;
		padding: 5px 10px;
	}

	.replyTagClose {
		font-size: 20px;
		line-height: 12px;
		padding: 0 0 2px 5px;
	}

	.foot-btn {
		padding-left: 10rpx;
		color: #007AFF;
	}

	.comment-sub-box {
		padding: 20rpx 0;
	}

	.comment-sub-item {
		display: flex;
	}

	.comment-none {
		padding: 20rpx;
		// width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		border: 1px solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}

	.btn-click {
		background-color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx 20rpx;
		color: #FFFFFF;
		border-radius: 30rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 100px;
		padding: 16rpx;
		width: 100%;
	}

	.comment-submit {
		padding: 5rpx 20rpx 10rpx 20rpx;
		border-bottom: 1px dashed #ddd;
		width: calc(100% - 40rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
